<template>
  <!-- 按钮 -->
  <div class="btn-input">

    <el-input class="input" :disabled="folderIds == ''?false:true" placeholder="查找文件" prefix-icon="el-icon-search"
      v-model="keyWord" clearable></el-input>

    <el-select :disabled="keyWord == ''?false:true" class="select" clearable v-model="folderIds" placeholder="请选择文件夹">
      <div v-for="(item, index) in folders" :key="index">
        <el-option :label="item.folderName" :value="item.id"></el-option>
      </div>
    </el-select>

    <el-button class="btn" :disabled="folderIds == ''?false:true" type="danger" round @click="batchDelete()">批量删除
      <i class="el-icon-delete el-icon--right"></i>
    </el-button>
    <el-button class="btn" :disabled="folderIds == ''?false:true" type="primary" round @click="batchRestore()">批量恢复
      <i class="el-icon-s-promotion el-icon--right"></i>
    </el-button>


  </div>
</template>

<script>
  import router from "@/router"
  import apiUrl from '@/api/url'
  import link from '@/api/Link'
  import sizeTostr from '@/util/FileSizeUtil'
  export default {
    name: "RecycHeader",
    props: [],
    data () {
      return {
        folders: [],
        folderIds: '',
        keyWord: '',
      }
    },
    methods: {
      //初始化
      init () {

        let data = {
          state: 1
        }
        link(apiUrl.baseUrl + '/sys/folder/findList/v1', 'POST', JSON.stringify(data)).then(ok => {
          if (ok.data.code == 0) {
            this.folders = ok.data.data
          } else {
            this.$message({
              message: ok.data.msg,
              type: "error",
            });
          }
        })

      },

      //批量删除
      batchDelete () {

        let fileIds = []
        let folderIds = []
        let fileSelection = this.$parent.$refs.fileTable.selection;

        for (let index = 0; index < fileSelection.length; index++) {
          const element = fileSelection[index];
          if (element.folderId != null) {
            fileIds.push(element.id)
          } else {
            folderIds.push(element.id)
          }
        }
        if (fileIds.length == 0 && folderIds.length == 0) {
          this.$message({
            message: "请选择文件",
            type: "warning",
          });
          return
        }

        this.$confirm('彻底删除文件？删除后，需要恢复请联系管理员', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }).then(() => {

          let data = {
            fileIds: fileIds,
            folderIds: folderIds,
            isDel: 1
          }
          link(apiUrl.baseUrl + '/sys/recycling/restoreOrDel/v1', 'POST', JSON.stringify(data)).then(ok => {
            if (ok.data.code == 0) {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.$parent.init()
            } else {
              this.$message({
                type: 'error',
                message: ok.data.msg
              });
            }
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      },
      //批量恢复
      batchRestore () {
        let fileIds = []
        let folderIds = []
        let fileSelection = this.$parent.$refs.fileTable.selection;

        for (let index = 0; index < fileSelection.length; index++) {
          const element = fileSelection[index];
          if (element.folderId != null) {
            fileIds.push(element.id)
          } else {
            folderIds.push(element.id)
          }
        }
        if (fileIds.length == 0 && folderIds.length == 0) {
          this.$message({
            message: "请选择文件",
            type: "warning",
          });
          return
        }
        let data = {
          fileIds: fileIds,
          folderIds: folderIds,
          isDel: 0
        }
        link(apiUrl.baseUrl + '/sys/recycling/restoreOrDel/v1', 'POST', JSON.stringify(data)).then(ok => {
          if (ok.data.code == 0) {
            this.$message({
              message: "恢复成功",
              type: "success",
            });
            this.$parent.init()
          } else {
            this.$message({
              type: 'error',
              message: ok.data.msg
            });
          }
        })
      },
      //同步数据
      syncData (id) {
        this.folderIds = id
        let data = {
          folderId: id
        }
        link(apiUrl.baseUrl + '/sys/recycling/findListById/v1', 'POST', JSON.stringify(data)).then(ok => {
          if (ok.data.code == 0) {
            this.$parent.fileData = ok.data.data
            this.$parent.folderData = []
            for (let i = 0; i < this.$parent.fileData.length; i++) {
              this.$parent.fileData[i].size = sizeTostr(this.$parent.fileData[i].size)
            }
          } else {
            this.$message({
              message: ok.data.msg,
              type: "error",
            });
          }
        })
      },

    },

    mounted () {
      this.init()
    },
    watch: {
      keyWord (curVal, oldVal) {
        // 实现input连续输入，只发一次请求
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          this.$parent.keyWord = curVal
          this.$parent.init()

        }, 300);
      },
      folderIds (curVal, oldVal) {
        this.$parent.previewId = curVal
        if (curVal == '') {
          this.$parent.init()
        } else {
          this.syncData(curVal)
        }

      }
    },
  };

</script>

<style scoped>
  .btn-input {
    margin: 10px;
    display: flex;

  }

  .btn {
    margin: 10px;
  }

  .input {
    width: 200px;
    margin: 10px;
  }

  .select {
    margin: 10px;
  }
</style>